<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>商品管理</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!-- page specific plugin styles -->
        <link rel="stylesheet" href="/lib/ace/css/select2.min.css" />
        <link rel="stylesheet" href="/lib/ace/css/jquery-ui.custom.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->

		<style>
			.param-space{
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>

		<div class="main-container ace-save-state" id="app">
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">

                        <div class="row" style="padding: 20px 10px 20px 50px">
                                <div class="col-xs-6">
                                    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#brandForm" data-whatever="@mdo">
                                        <i class="ace-icon fa fa-check bigger-120"></i>
                                        商品添加
                                    </button>
                                    <!-- <button class="btn btn-primary" id="addBrand">
                                       
                                    </button> -->
                                </div>
                                <div class="col-xs-3">
                                    <span>状态: &nbsp;</span>

                                    <div data-toggle="buttons" class="btn-group" id="color">
                                        <label class="btn btn-sm">
                                            <input type="radio" id="saleable1" />
                                            <span @click="getSaleable1">全部</span>
                                        </label>

                                        <label class="btn btn-sm">
                                            <input type="radio" value="1" id="saleable2" />
                                            <span @click="getSaleable2">上架</span>
                                        </label>

                                        <label class="btn btn-sm">
                                            <input type="radio" value="0" id="saleable3" />
                                            <span @click="getSaleable3">下架</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-xs-3">
                                    <form>
                                        <div class="row">
                                            <div class="col-xs-12 col-sm-11 col-md-10">
                                                <div class="input-group">
                                                    <input type="text" class="form-control" v-model="key" name="keywords" placeholder="字段查询" />
                                                    <div class="input-group-btn">
                                                        <button type="button" class="btn btn-default no-border btn-sm">
                                                            <i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                        </div>
                            
                        <div class="row">
                            <div class="col-xs-12">
                                <table id="simple-table" class="table  table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>id</th>
                                            <th>标题</th>
                                            <th>商品分类</th>
                                            <th>品牌</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr v-for="(item ,i) in list" :key="item.id">
                                            <td v-cloak>{{ i + num }}</td>
                                            <td v-cloak>{{item.id}}</td>
                                            <td v-cloak>{{item.title}}</td>
                                            <td v-cloak>{{item.cname}}</td>
                                            <td v-cloak>{{item.bname}}</td>
                                            <td>
                                                <div class="hidden-sm hidden-xs btn-group">
                                                    <button class="btn btn-xs btn-info">
                                                        <i class="ace-icon fa fa-pencil bigger-120"></i>
                                                    </button>
                                                    <button class="btn btn-xs btn-danger">
                                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                                    </button>
													<label>
                                                        <input name="switch-field-1" checked="" class="ace ace-switch ace-switch-7 btn-flat" type="checkbox"  />
                                                        <span class="lbl" data-lbl="下架 ------- 上架"></span>
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!--分页-->
                        <div class="am-u-sm-12 am-u-end base-ad">
                            <ul class="am-pagination am-pagination-centered" id="page">
                                <li class="am-disabled"></li>
                            </ul>
                        </div>
                       
                        <!-- 表单 -->
                        <div class="modal fade" id="brandForm" tabindex="-1" role="dialog" aria-labelledby="brandFormLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="brandFormLabel">商品添加</h4>
                                    </div>
                                    <div class="modal-body">
                                
                                        <div class="widget-body">
                                            <div class="widget-main">
                                                <div id="fuelux-wizard-container">
                                                    <div>
                                                        <ul class="steps">
                                                            <li data-step="1" class="active">
                                                                <span class="step">1</span>
                                                                <span class="title">基本信息</span>
                                                            </li>
    
                                                            <li data-step="2">
                                                                <span class="step">2</span>
                                                                <span class="title">商品描述</span>
                                                            </li>
    
                                                            <li data-step="3">
                                                                <span class="step">3</span>
                                                                <span class="title">规格参数</span>
                                                            </li>
    
                                                            <li data-step="4">
                                                                <span class="step">4</span>
                                                                <span class="title">SKU属性</span>
                                                            </li>
                                                        </ul>
                                                    </div>
    
                                                    <hr />
    
                                                    <div class="step-content pos-rel">
                                                        <div class="step-pane active" data-step="1">
                                                        
                                                            <form class="form-horizontal" id="sample-form">
                                                                <div class="form-group">

                                                                    <div class="col-xs-6">
                                                                        <span class="block input-icon input-icon-right">
                                                                            <input type="text" class="width-100" placeholder="请选择商品分类" />
                                                                        </span>
                                                                    </div>
                                                                    
                                                                    <div class="col-xs-6">
                                                                        <select class="form-control" id="form-field-select-1">
                                                                            <option value="">所属品牌</option>
                                                                            <option value="AL">Alabama</option>
                                                                            <option value="AK">Alaska</option>
                                                                            <option value="AZ">Arizona</option>
                                                                            <option value="AR">Arkansas</option>
                                                                            <option value="CA">California</option>
                                                                            <option value="CO">Colorado</option>
                                                                            <option value="CT">Connecticut</option>
                                                                            <option value="DE">Delaware</option>
                                                                            <option value="FL">Florida</option>
                                                                            <option value="GA">Georgia</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
    
                                                                <div class="form-group">
    
                                                                    <div class="col-xs-12">
                                                                        <span class="block input-icon input-icon-right">
                                                                            <input type="text" class="width-100" placeholder="商品标题" />
                                                                        </span>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group">
    
                                                                        <div class="col-xs-12">
                                                                            <span class="block input-icon input-icon-right">
                                                                                <input type="text" class="width-100" placeholder="商品卖点" />
                                                                            </span>
                                                                        </div>
                                                                    </div>
    
                                                                <div class="form-group">
    
                                                                    <div class="col-xs-12">
                                                                        <span class="block input-icon input-icon-right" >
                                                                            <textarea class="autosize-transition form-control" placeholder="包装清单"></textarea>
                                                                        </span>
                                                                    </div>

                                                                </div>

                                                                <div class="form-group">
    
                                                                    <div class="col-xs-12">
                                                                        <span class="block input-icon input-icon-right" >
                                                                            <textarea class="autosize-transition form-control" placeholder="售后服务"></textarea>
                                                                        </span>
                                                                    </div>

                                                                </div>
                                                            </form>

                                                        </div>
    
                                                        <div class="step-pane" data-step="2">
                                                            <div class="wysiwyg-editor" id="editor1"></div>
                                                            <div class="hr hr-double dotted"></div>
                                                        </div>
    
                                                        <div class="step-pane" data-step="3">
                                                            <div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        品牌:
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入品牌" />

																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        型号：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入型号" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        上市年份：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入上市年份" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        机身重量：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入机身重量" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        机身材质：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入机身材质" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        操作系统：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入操作系统" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        CPU品牌：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入CPU品牌" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        CPU型号：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入CPU型号" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        CPU核数：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入CPU核数" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        CPU频率：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入CPU频率" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        主屏幕尺寸：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入主屏幕尺寸" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        分辨率：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入分辨率" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        前置摄像头：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入前置摄像头像素" />
																</div>
																<div class="col-sm-6">
																	<div class="param">
                                                                        后置摄像头：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" class="param-space" placeholder="请输入后置摄像头像素" />
																</div>
															</div>
															
															<div class="col-sm-12">
																<div class="col-sm-6">
																	<div class="param">
                                                                        电池容量：
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                   
                                                                    <input type="text" placeholder="请输入电池容量" />
																</div>
															</div>
                                                        </div>
    
                                                        <div class="step-pane" data-step="4">
                                                            <form class="form-horizontal" role="form">
                                                                <div class="form-group">

                                                                    <div class="param">
                                                                        机身颜色:
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                    <div class="param" id="addFuselage">
                                                                        <input type="text" name="fuselage" required placeholder="请输入机身颜色" style="width: 450px; margin-right: 75px; margin-bottom: 10px" />
                                                                        <a href="javascript:void(0)" id="addFuselageBtn">
                                                                            <span class="glyphicon glyphicon-plus" style="font-size: 16px; text-align: center; color: slategray"></span>
                                                                        </a>
                                                                    </div>
                                                                </div>

																<div class="form-group">

                                                                    <div class="param">
                                                                        内存:
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                    <div class="param" id="addRunRam">
                                                                        <input type="text" name="runRam" required placeholder="请输入运行内存" style="width: 450px; margin-right: 75px; margin-bottom: 10px" />
                                                                        <a href="javascript:void(0)" id="addRunRamBtn">
                                                                            <span class="glyphicon glyphicon-plus" style="font-size: 16px; text-align: center; color: slategray"></span>
                                                                        </a>
                                                                    </div>
                                                                </div>

																<div class="form-group">

                                                                    <div class="param">
                                                                        机身存储:
                                                                    </div>
                                                                    <div class="space-10"></div>
                                                                    <div class="param" id="addFuselageRam">
                                                                        <input type="text" name="fuselageRam" required placeholder="请输入机身内存" style="width: 450px; margin-right: 75px; margin-bottom: 10px" />
                                                                        <a href="javascript:void(0)" id="addFuselageRamBtn">
                                                                            <span class="glyphicon glyphicon-plus" style="font-size: 16px; text-align: center; color: slategray"></span>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
    
                                                <hr />
                                                <div class="wizard-actions">
                                                    <button class="btn btn-prev">
                                                        <i class="ace-icon fa fa-arrow-left"></i>
                                                        上一步
                                                    </button>
    
                                                    <button class="btn btn-success btn-next" data-last="Finish">
                                                        下一步
                                                        <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
					</div>
				</div>
            </div>
            
		</div>


		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="/lib/ace/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
        <script src="/lib/ace/js/wizard.min.js"></script>
		<script src="/lib/ace/js/jquery.validate.min.js"></script>
		<script src="/lib/ace/js/jquery-additional-methods.min.js"></script>
		<script src="/lib/ace/js/bootbox.js"></script>
		<script src="/lib/ace/js/jquery.maskedinput.min.js"></script>
        <script src="/lib/ace/js/select2.min.js"></script>
        <script src="/lib/ace/js/jquery-ui.custom.min.js"></script>
		<script src="/lib/ace/js/jquery.ui.touch-punch.min.js"></script>
		<script src="/lib/ace/js/markdown.min.js"></script>
		<script src="/lib/ace/js/bootstrap-markdown.min.js"></script>
		<script src="/lib/ace/js/jquery.hotkeys.index.min.js"></script>
		<script src="/lib/ace/js/bootstrap-wysiwyg.min.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

        <!-- vue scripts -->
        <script src="/lib/vue/vue.js"></script>

        <!--bootstrap分页-->
        <script src="/lib/bootstrap/js/bootstrap-paginator.js"></script>

        <!-- 自己 js -->
        <script src="/js/goods.js"></script>

        <script type="text/javascript">
            var $validation = false;
            $('#fuelux-wizard-container')
                .ace_wizard({
                    // step: 2 //可选参数。向导将首先跳到步骤“2”
                    // buttons: '.wizard-actions:eq(0)'
                })
                .on('actionclicked.fu.wizard' , function(e, info){
                    if(info.step == 1 && $validation) {
                        if(!$('#validation-form').valid()) e.preventDefault();
                    }
                })
                //.on('changed.fu.wizard', function() {
                //})
                .on('finished.fu.wizard', function(e) {
                    bootbox.dialog({
                        message: "谢谢您！您的信息已成功保存！",
                        buttons: {
                            "success" : {
                                "label" : "OK",
                                "className" : "btn-sm btn-primary"
                            }
                        }
                    });

                }).on('stepclick.fu.wizard', function(e){
                //e.preventDefault();//这将阻止单击和选择步骤
            });

            // 动态添加输入框
            $("#addFuselageBtn").click(function(){

                $('#addFuselage').append("<input type='text' name='fuselage' required placeholder='请输入机身颜色' style='width: 450px; margin-right: 77.5px; margin-bottom: 10px' />");
                $('#addFuselage').append("<a href='javascript:void(0)' onclick='moveInput(this)' ><span class='glyphicon glyphicon-minus' style='font-size: 16px; text-align: center; color: slategray'></span></a>");

            });

            // 动态添加输入框
            $("#addRunRamBtn").click(function(){

                $('#addRunRam').append("<input type='text' name='runRam' required placeholder='请输入运行内存' style='width: 450px; margin-right: 77.5px; margin-bottom: 10px' />");
                $('#addRunRam').append("<a href='javascript:void(0)' onclick='moveInput(this)' ><span class='glyphicon glyphicon-minus' style='font-size: 16px; text-align: center; color: slategray'></span></a>");

            });

            // 动态添加输入框
            $("#addFuselageRamBtn").click(function(){

                $('#addFuselageRam').append("<input type='text' name='fuselageRam' required placeholder='请输入机身内存' style='width: 450px; margin-right: 77.5px; margin-bottom: 10px' />");
                $('#addFuselageRam').append("<a href='javascript:void(0)' onclick='moveInput(this)' ><span class='glyphicon glyphicon-minus' style='font-size: 16px; text-align: center; color: slategray'></span></a>");

            });

            // 动态删除输入框
            function moveInput(obj){

                $(obj).prev().remove();
                $(obj).remove();

            }
        </script>

        <script type="text/javascript">
			jQuery(function($){
	
                $('textarea[data-provide="markdown"]').each(function(){
                    var $this = $(this);

                    if ($this.data('markdown')) {
                    $this.data('markdown').showEditor();
                    }
                    else $this.markdown()
                    
                    $this.parent().find('.btn').addClass('btn-white');
                })
                
                
                
                function showErrorAlert (reason, detail) {
                    var msg='';
                    if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
                    else {
                        //console.log("error uploading file", reason, detail);
                    }
                    $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>'+ 
                    '<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
                }

                //$('#editor1').ace_wysiwyg();//this will create the default editor will all buttons

                //but we want to change a few buttons colors for the third style
                $('#editor1').ace_wysiwyg({
                    toolbar:
                    [
                        'font',
                        null,
                        'fontSize',
                        null,
                        {name:'bold', className:'btn-info'},
                        {name:'italic', className:'btn-info'},
                        null,
                        {name:'insertunorderedlist', className:'btn-success'},
                        {name:'insertorderedlist', className:'btn-success'},
                        {name:'outdent', className:'btn-purple'},
                        {name:'indent', className:'btn-purple'},
                        null,
                        {name:'justifyleft', className:'btn-primary'},
                        {name:'justifycenter', className:'btn-primary'},
                        null,
                        {name:'createLink', className:'btn-pink'},
                        {name:'unlink', className:'btn-pink'},
                        null,
                        {name:'insertImage', className:'btn-success'},
                        null,
                        'foreColor',
                        null,
                    ],
                    'wysiwyg': {
                        fileUploadError: showErrorAlert
                    }
                }).prev().addClass('wysiwyg-style2');

                
                /**
                //make the editor have all the available height
                $(window).on('resize.editor', function() {
                    var offset = $('#editor1').parent().offset();
                    var winHeight =  $(this).height();
                    
                    $('#editor1').css({'height':winHeight - offset.top - 10, 'max-height': 'none'});
                }).triggerHandler('resize.editor');
                */
                

                $('#editor2').css({'height':'200px'}).ace_wysiwyg({
                    toolbar_place: function(toolbar) {
                        return $(this).closest('.widget-box')
                            .find('.widget-header').prepend(toolbar)
                            .find('.wysiwyg-toolbar').addClass('inline');
                    },
                    toolbar:
                    [
                        'bold',
                        {name:'italic' , title:'Change Title!', icon: 'ace-icon fa fa-leaf'},
                        'strikethrough',
                        null,
                        'insertunorderedlist',
                        'insertorderedlist',
                        null,
                        'justifyleft',
                        'justifycenter',
                        'justifyright'
                    ],
                    speech_button: false
                });
                
                


                $('[data-toggle="buttons"] .btn').on('click', function(e){
                    var target = $(this).find('input[type=radio]');
                    var which = parseInt(target.val());
                    var toolbar = $('#editor1').prev().get(0);
                    if(which >= 1 && which <= 4) {
                        toolbar.className = toolbar.className.replace(/wysiwyg\-style(1|2)/g , '');
                        if(which == 1) $(toolbar).addClass('wysiwyg-style1');
                        else if(which == 2) $(toolbar).addClass('wysiwyg-style2');
                        if(which == 4) {
                            $(toolbar).find('.btn-group > .btn').addClass('btn-white btn-round');
                        } else $(toolbar).find('.btn-group > .btn-white').removeClass('btn-white btn-round');
                    }
                });


                

                //RESIZE IMAGE
                
                //Add Image Resize Functionality to Chrome and Safari
                //webkit browsers don't have image resize functionality when content is editable
                //so let's add something using jQuery UI resizable
                //another option would be opening a dialog for user to enter dimensions.
                if ( typeof jQuery.ui !== 'undefined' && ace.vars['webkit'] ) {
                    
                    var lastResizableImg = null;
                    function destroyResizable() {
                        if(lastResizableImg == null) return;
                        lastResizableImg.resizable( "destroy" );
                        lastResizableImg.removeData('resizable');
                        lastResizableImg = null;
                    }

                    var enableImageResize = function() {
                        $('.wysiwyg-editor')
                        .on('mousedown', function(e) {
                            var target = $(e.target);
                            if( e.target instanceof HTMLImageElement ) {
                                if( !target.data('resizable') ) {
                                    target.resizable({
                                        aspectRatio: e.target.width / e.target.height,
                                    });
                                    target.data('resizable', true);
                                    
                                    if( lastResizableImg != null ) {
                                        //disable previous resizable image
                                        lastResizableImg.resizable( "destroy" );
                                        lastResizableImg.removeData('resizable');
                                    }
                                    lastResizableImg = target;
                                }
                            }
                        })
                        .on('click', function(e) {
                            if( lastResizableImg != null && !(e.target instanceof HTMLImageElement) ) {
                                destroyResizable();
                            }
                        })
                        .on('keydown', function() {
                            destroyResizable();
                        });
                    }

                    enableImageResize();

                    /**
                    //or we can load the jQuery UI dynamically only if needed
                    if (typeof jQuery.ui !== 'undefined') enableImageResize();
                    else {//load jQuery UI if not loaded
                        //in Ace demo ./components will be replaced by correct components path
                        $.getScript("assets/js/jquery-ui.custom.min.js", function(data, textStatus, jqxhr) {
                            enableImageResize()
                        });
                    }
                    */
                }


            });
		</script>
	</body>
</html>
